// import React from 'react' // purpose to highlight the jsx syntax and to use jsx in this file
import renderer from '@/renderer'

const { renderToString, renderToDOM } = renderer

// jsx 代码到底是如何执行的
const App = () => (
  <div>
    <h1 data-payload={JSON.stringify({ age: 23, desc: 'description' })}>Root App</h1>
    <input placeholder="name..." data-x="x-x" />
    <p>By -- Safari - Shi</p>
    <div class="container">
      <p>Some Text</p>
      <span>SPAN - text</span>
    </div>
    <StatelessProfile />
    <StatefulProfile content="by my self" />
  </div>
)

// this is the most usage I practice
function StatelessProfile(props) {
  return (
    <div>functional component</div>
  )
}

function Demo(props) {
  const { x = 'bbb' } = props
  return (
    <p>demo {x}<em>x-em</em></p>
  )
}

class StatefulProfile {
  constructor(props) {
    this.props = props
  }
  beforeRender() {
    // console.log(Object.create(null), 'beforeRender within statefulCompoent')
  }
  render() {
    const { content = 'default content' } = this.props
    return (
      <div>class component {content}</div>
    )
  }
}

class Stateful {
  constructor(props) {
    this.props = props
  }
  render() {
    const { ps = 'default props of ps' } = this.props
    return (
      <div class='bbbxx33' style="color: red;">
        <h1>
          stateful Component {ps}
        </h1>
        <pre class="bem__pre">
          {JSON.stringify(this.props, null, 2)}
        </pre>
      </div>
    )
  }
}

// renderToString(
//   <div id="yyy" data-id={333}>
//     <span class='a-sapn'>xxx</span>
//     ||
//     <Stateful x='你好呀' ps="PS" />
//     ||
//   </div>,
//   document.getElementById('root')
// )

renderToDOM(
  <App />,
  document.getElementById('root')
)